<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="240px">
                {{ nodeClicked }}
                <el-input v-model="filterText" style="width: 240px" placeholder="过滤关键字" />

                <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data" :props="defaultProps"
                    default-expand-all :filter-node-method="filterNode" @node-click="nodeClick" />
            </el-aside>
            <el-main>数据</el-main>

        </el-container>
    </div>
</template>


<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import axios from 'axios';

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'areaName',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.areaName.includes(value)
}

const data = ref([])

const getData = () => {
    axios.get('http://localhost:5015/api/Area/GetAreaTree').then((res) => {
        data.value = res.data.data
    });
}
//用来记录点击的节点信息,包括id 和 areaName
const nodeClicked = reactive({
    id: 0,
    areaName: ''
})

const nodeClick = (nodeObj: any, node: any, treeNode: any, eventObj: any) => {
    // console.log(nodeObj);
    nodeClicked.areaName = nodeObj.areaName;
    nodeClicked.id = nodeObj.id;
}

onMounted(() => {
    getData()
});
</script>




<!-- 
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import axios from 'axios';

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const myProps = {
    children: 'children',
    label: 'areaName',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.areaName.includes(value)
}

const data = ref([]);

//调用后端接口,获取区域的树状数据结构
const getAreaTree = () => {
    axios.get('http://localhost:5015/api/Area/GetAreaTree').then((res) => {
        data.value = res.data.data;
    });
}

onMounted(() => {
    getAreaTree()
});

</script> -->